<template>
    <view class="myfans-content">
        <view class="center-detail">
            <view class="center-item center-fans">
                <view class="center-col center-width">
                    <view class="center-point">
                        <text>今日新增粉丝(人)</text>
                    </view>
                    <view class="center-fannum">{{ Data.toDayFansIncrease }}</view>
                </view>
                <view class="center-line"></view>
                <view class="center-col center-width">
                    <view class="center-point">
                        <text>累计粉丝(人)</text>
                    </view>
                    <view class="center-fannum">{{ Data.cumulativeFans }}</view>
                </view>
            </view>
        </view>
        <view class="income-check">
            <text>我的粉丝</text>
        </view>
        <view class="income-container">
            <view v-if="Data.dataList.length" class="myIntegral-list">
                <view v-for="(item, index) in Data.dataList" :key="index" class="integral-item">
                    <image :src="item.avatar || getImgOssUrl('/ui-prod-2.7.0/avatar.png')" class="invite-main"></image>
                    <view class="invite-col">
                        <view class="integral-record">
                            <view class="name">
                                <text>{{ item.nickname }}</text>
                            </view>
                            <view class="income-from">{{ item.created_at }}</view>
                        </view>
                        <view class="integral-record" style="padding-bottom: 0; line-height: 36rpx">
                            <view class="income-level">累计订单数(单)：{{ item.cumulativeOrderNum }}</view>
                        </view>
                        <view class="integral-record" style="padding-bottom: 0; line-height: 36rpx">
                            <view class="income-level"
                                >累计订单额(元)：<text class="income-point">{{
                                    floatDivide(item.cumulativeOrderAmount, 100)
                                }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-else class="no-data">
                <img class="empty" :src="getImgOssUrl('/ui-prod-2.3.0/empty-addr@2x.png')" />
                暂无数据
            </view>
            <view class="list-loading">
                {{ isBottom && Data.dataList.length ? (listLoading ? '加载中…' : '已经到底啦！') : '' }}
            </view>
            <Loading />
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, computed, nextTick } from 'vue';
import { onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import router from '@/router';
import request from '@/request';
import store from '@/store';
import Loading from '@/components/el-loading';
import { checkToken, getImgOssUrl, floatDivide } from '@/commons/utils';
// 跳转到等级中心页面
let listLoading = ref(false);
const Data = reactive({
    toDayFansIncrease: '', //今日粉丝数
    cumulativeFans: '', //累计粉丝数
    dataList: [],
    page: 1,
    perPage: 10,
    scrollTop: 0,
    totalCount: 0
});

const isBottom = computed(() => {
    return Data.scrollTop > 50;
});
const getIntegralList = async () => {
    listLoading.value = true;
    const { page, perPage } = Data;
    let res = await request('fansList');
    Data.toDayFansIncrease = res.data.toDayFansIncrease;
    Data.cumulativeFans = res.data.cumulativeFans;
    let list = res.data.data.list || [];
    if (page === 1) {
        Data.dataList = list;
    } else {
        Data.dataList = Data.dataList.concat(list);
    }
    listLoading.value = false;
    Data.totalCount = res.data.data.totalCount;
};
onShow(() => {
    getIntegralList();
});
onPageScroll(e => {
    Data.scrollTop = e.scrollTop;
});
// 上拉加载
onReachBottom(() => {
    if (Data.totalCount === Data.dataList.length) {
        return;
    }
    Data.page++;
    getIntegralList();
});
</script>
<style lang="scss" scoped src="./index.scss"></style>
